We’re using cookies, but you can turn them off in Privacy Settings. Otherwise, you are agreeing to our use of cookies. Accepting cookies does not mean that we are collecting personal data. Learn more in our Privacy Policy .

Browsing / Lists

Results Lists (No Filters)

  • Past Event Name

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    dd MMM YYYY

  • Policy Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    dd MMM YYYY (Archived)

HTML

<ul class="result-set no-margin list-unstyled no-background">
    <li class="card-result">
        <h4 class="coveo-title"><a href="#">Past Event Name</a></h4>
        <div class="result-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        </div>
        <div class="result-meta">
            <span class="result-meta-item">
                <span class="date" aria-label="official date">dd MMM YYYY</span>
            </span>
        </div>
    </li>
</ul>

Problem Being Solved

Users need to view a dynamic set of content.

When to Use

The result list should be used to display content that is dynamic, but simple or short enough that the user does not need to filter it, e.g., CFA® Program Policies.

When Not to Use

The result list should not be used for complex results where the user would benefit from being able to filter.

Formatting

  • Browse lists are likely to originate from Coveo. We will do our best to standardize the look and feel with their code.
  • This type of list should be placed in a standard content well.

Filtered Results

Filters

Issue Brief filters: Article series, Book series, Multimedia series

Press Release filters: Year (Date), Country/Region (Location)

Prep Provider filters: Provider type, Course format, Country/Region (Location)

CPD Content filters (FAJ, Online Courses, etc): Topic, CE, Article series, Book series, Multimedia series, Multimedia type, Multimedia category

Conference filters: Topic (Session topic tag), Hosted by, Country/Region (Location)

Webinar filters: Topic (auto-tags, high relevance), Hosted by

Current Sanction filters: Sanctioned Person (Title), Country/Region (Location), Sanction type

Comment Letter filters: Topic (auto-tags, high relevance), Year (Date filed), Submitted to

Society filters: Global Passport Program, Country/Region (Location)

Waiver filters: Program, Country/Region (Location), Waiver type

Affiliated University filters: Country/Region (Location)

Refresher Reading filters: Curriculum topic, Curriculum year, Exam level

XXX Results

  • Issue Brief Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    dd MMM YYYY Author Name Author Name Author Name

  • Press Release Title

    dd MMM YYYY Location

  • Prep Provider Name

    Online In-Person
  • Media Type Series

    CPD Browse Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    dd MMM YYYY Author Name Author Name Author Name
    5 0.25

  • FAJ Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    dd MMM YYYY Author Name Author Name Author Name
    5 0.25

  • Online Course Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    dd MMM YYYY Author Name Author Name Author Name
    5

  • Conference Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    dd MMM YYYY Location
    Hosted By Place 1 Place 2
    5

  • Webinar Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    dd MMM YYYY HH:MM
    Hosted By Place 1 Place 2
    5
  • Sanctioned Person Name
    Location Type dd MMM YYYY

    Violation. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

    Violation Detail. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

    Response. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

  • Comment Letter Title (PDF)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    dd MMM YYYY
  • CFA Québec
    Canada
    Society Name
    CityCountry

  • Waiver Title

    Program Level Location
    Waiver type What is being waived
    Waiver Details

    Details. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

    Additional Information

    Details. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

  • Affiliated University Name

    CityCountry
    Degree Programs:

    Program
    Program
    Program

  • Refresher Reading Title

    Topics Year Program Level
    2.5
  • External Content Publisher / Type / Series

    ARX Article Title (PDF)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    dd MMM YYYY Authors
    Posted By Poster Name
    0.5

HTML

<section class="grid-container browse-container">
    <div class="sidebar">
        <div class="card card-sidebar">
            <p class="card-title">Filters</p>
            <p>Issue Brief filters: Article series, Book series, Multimedia series</p>
            <p>Press Release filters: Year (Date), Country/Region (Location)</p>
            <p>Prep Provider filters: Provider type, Course format, Country/Region (Location)</p>
            <p>CPD Content filters (FAJ, Online Courses, etc): Topic, CE, Article series, Book series, Multimedia series, Multimedia type, Multimedia category</p>
            <p>Conference filters: Topic (Session topic tag), Hosted by, Country/Region (Location)</p>
            <p>Webinar filters: Topic (auto-tags, high relevance), Hosted by</p>
            <p>Current Sanction filters: Sanctioned Person (Title), Country/Region (Location), Sanction type</p>
            <p>Comment Letter filters:  Topic (auto-tags, high relevance), Year (Date filed), Submitted to</p>
            <p>Society filters:  Global Passport Program, Country/Region (Location)</p>
            <p>Waiver filters:  Program, Country/Region (Location), Waiver type</p>
            <p>Affiliated University filters:  Country/Region (Location)</p>
            <p>Refresher Reading filters:  Curriculum topic, Curriculum year, Exam level</p>
        </div>
    </div>
    <div>
        <ul class="result-set no-margin list-unstyled no-background">
            <li id="CPD" class="card-result">
                <div class="result-meta">
                    <span class="result-meta-item">Media Type</span>
                    <span class="result-meta-item">Series</span>
                </div>
                <h4 class="coveo-title"><a href="#">CPD Browse Title</a></h4>
                <div class="result-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                </div>
                <div class="result-meta">
                    <span class="result-meta-item">Date</span>
                    <span class="result-meta-item">
                        <span class="author">Author Name</span>
                        <span class="author">Author Name</span>
                        <span class="author">Author Name</span>
                    </span>
                </div>
                <div class="result-meta">
                    <span class="tag">
                        <span class="ce-credit">5</span>
                        <span class="ser-credit">0.25</span>
                    </span>
                </div>
            </li>
            <li id="Society" class="card-result">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="coveo-title"><a href="#">Society Name</a></div>
                        <div class="result-meta">
                            <span class="result-meta-item">
                                <span class="result-city">City</span><span class="result-country">Country</span>
                            </span>
                        </div>
                    </div>
                    <div class="col-lg-4 gpp-logo">
                        <img src="/Content/img/bootstrap/passport_program.png" alt="Global Passport Program Participant" />
                    </div>
                </div>
            </li>
            <li id="Waiver" class="card-result">
                <h4 class="coveo-title"><a href="#">Waiver Title</a></h4>
                <div class="result-meta">
                    <span class="result-meta-item">Program</span>
                    <span class="result-meta-item">Level</span>
                    <span class="result-meta-item">Location</span>
                </div>
                <div class="result-meta new-line">
                    <span class="result-meta-item">
                        <span class="waiver-type">Waiver type</span>
                        <span class="waiver-what">What is being waived</span>
                    </span>
                </div>
                <div class="panel-group">
                    <noscript>
                        <style>
                            .collapse {
                                display: block;
                            }
                        </style>
                    </noscript>
                    <div class="panel-no-border">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <a data-toggle="collapse" href="#collapseWaiver" class="collapsed toggle-caption"><span class="toggle-text">Show Details</span></a>
                            </div>
                        </div>
                        <div id="collapseWaiver" class="panel-collapse collapse">
                            <div class="panel-body">
                                <h5>Waiver Details</h5>
                                <p>Details. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
                                    odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
                                    Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
                                <h5>Additional Information</h5>
                                <p>Details. lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
                                    odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
                                    Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li id="University" class="card-result">
                <div class="row">
                    <div class="col-md-4 affiliate-logo">
                        <a href="#"><img src="/Content/img/examples/logo.png" alt="example" /></a>
                    </div>
                    <div class="col-md-8">
                        <h4 class="coveo-title"><a href="#">Affiliated University Name</a></h4>
                        <div class="result-meta">
                            <span class="result-meta-item">
                                <span class="result-city">City</span><span class="result-country">Country</span>
                            </span>
                        </div>
                        <div class="result-meta">
                            <h5>Degree Programs:</h5>
                            <p>
                                Program<br/>
                                Program<br />
                                Program
                            </p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</section>

Problem Being Solved

Users need to view a dynamic set of content.

When to Use

Filtered results should be used when the set of results is long and complex enough that a user benefits from being able to narrow it. It should also be used if the content set is small at launch but we anticipate expansion.

When Not to Use

Filtered results should not be used for simple or small result sets.

Formatting

  • Browse lists are likely to originate from Coveo. We will do our best to standardize the look and feel with their code.
  • Filtered results need to be put in the wide content well.
  • Sidebar filters should be in a div container with the class name "sidebar."
  • The actual results unordered list should be in a div container (no class names needed at this time).
  • See sidebar for filter categories for each browse type.